"use client"

import React from 'react';
import Link from "next/link";
import {usePathname} from "next/navigation";

const linkData = [
    {
        title: 'Dashboard',
        href: '/dashboard'
    },
    {
        title: 'Performance',
        href: '/performance'
    },
    {
        title: 'Scale',
        href: '/scale'
    }
]

function Header(props) {
    const pathname = usePathname();
    return (
        <div className={"absolute w-full z-10"}>
            <div className={"flex justify-between container mx-auto text-white p-8"}>
                <Link className={"text-3xl font-bold"} href={'/'}>Home</Link>
                <div className={"text-xl space-x-4"}>
                    {
                        linkData.map((item) => (
                            <Link key={item.title} href={item.href}
                                  className={`${item.href === pathname ? 'underline' : ''}`}>{item.title}</Link>
                        ))
                    }
                </div>
            </div>
        </div>
    );
}

export default Header;
